<template>
  <view class="vip-card">
    <view class="flex-between">
      <view class="vip-title">乘凉VIP</view>
      <view class="vip-grade flex" @click="vipGradePop.open()">
        再获得200经验值，升级Lv2
        <u-icon name="arrow-right-double"></u-icon>
      </view>
    </view>
    <view class="flex u-col-center p-c-20">
      <view class="u-f-ss">￥
        <span class="u-f-sxl">100</span>
      </view>
      <view class="p-r-15 ">|</view>
      <view class="u-f-sx u-f-sm">积分100</view>
    </view>
    <view class="u-f-ss flex-between">
      <view class="charges" @click="toPath('/user/charges/index')">充值</view>
      <view>
        <image src="@/static/icon/ercode.png" style="width:40rpx;height: 40rpx"
               @click="toggleDrawer"/>
      </view>
    </view>
  </view>
  <view class="code-box" :class="{'dropdown-open': state.isOpen}">
    <view class="child-card flex-column-center">
      <image src="https://picsum.photos/200" style="width: 7rem;height:7rem;aspect-ratio: 1/1;" class="p-c-30"/>
      <view style="margin-bottom: 20rpx">2025 0523 7912 9910</view>
    </view>
    <view class="child-menu">
      <DefineTmp v-slot="{item}">
        <view class="flex-between u-f-sx" style="padding: 10rpx 0">
          <view>{{ item.name }}</view>
          <view @click="toPath(item.path)">
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </DefineTmp>
      <UseTmp v-for="(item,index) of operArr" :key="index" :item="item"></UseTmp>
    </view>
  </view>
  <VipGradePop ref="vipGradePop"></VipGradePop>
</template>
<script lang="ts" setup>
import {createTemplate} from "@/util/template/DefineTemplate";
import {onMounted, reactive, ref} from "vue";
import {toPath} from "@/util/router/router";
import VipGradePop from "@/user/components/VipGradePop.vue";

const {DefineTmp, UseTmp} = createTemplate()
const vipGradePop = ref()
const state = ref({
  isShow: false,
  isOpen: false,
})
const operArr = reactive([
  {
    name: '测试1',
    path: '#',
  },
  {
    name: '测试1',
    path: '#',
  },
  {
    name: '测试1',
    path: '#',
  },
  {
    name: '测试1',
    path: '#',
  },
])

function toggleDrawer() {
  state.value.isOpen = !state.value.isOpen
}

</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

$radius: 20rpx;
@mixin card {
  background: #fff;
  margin: 0 60rpx;
  color: #888;
}

.vip-card {
  background-image: url("@/static/img/vip.png");
  background-size: cover;
  padding: 20rpx;
  color: #a6a6a6;
  border-radius: 10rpx;
  margin: 30rpx;
  margin-bottom: 0;
  box-shadow: 0 0 20rpx var(--shadow-color);

  .vip-title {
    font-size: 28rpx;
    font-weight: 600;
    padding: 10rpx 0;
  }

  .vip-grade {
    font-size: 22rpx;
    font-weight: 500;
    color: #cecdcd;
  }

  .charges {
    background: #a6a6a6;
    border-radius: 20rpx;
    padding: 8rpx 30rpx;
    color: #000;
    font-size: 24rpx;
  }
}

.child-card {
  @include card;
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
}

.child-menu {
  border-radius: $radius;
  @include card;
  padding: $radius;
  margin-top: 10rpx;
}

.code-box {
  overflow: hidden;
  transition: all 0.5s ease;
  max-height: 0;
  will-change: transform; /* 提升动画性能 */
  backface-visibility: hidden; /* 防止闪烁 */
}

.dropdown-open {
  max-height: 1000rpx;
}
</style>